<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>


    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }

        .success {
            background-color: greenyellow;
        }

        .danger {
            background-color: red
        }

        .warning {
            background-color: yellow;
        }

    </style>

</head>
<body>

<div id="app">


    <div :style="styles">
        ddd
    </div>


    <div class="test" :class="cls1">


    </div>

    <hr>
    <h1>使用实例</h1>
    <hr>
    <div class="box" :class="cls2">

    </div>

    <div>
        <button @click="btnSuccessClick">success</button>
        <button @click="btnDangerClick">danger</button>
        <button @click="btnWarningClick">warning</button>
    </div>

</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script>

    /**
     *
     *   style
     *       对象语法
     *           json对象 ，驼峰命名法
     *       数组语法
     *
     *   class
     *       对象语法
     *       数组语法
     * */


    /**
     * 点击不同的按钮 改变div的背景颜色
     * */

    const app = {
        data() {
            return {

                cls: {
                    'success': false,
                    'danger': false,
                    'warning': false
                },
                cls2:[
                    {

                    }
                ]

            }
        },
        methods:{
             btnSuccessClick(){


                  this.cls2.pop();
                  this.cls2.push({
                      'success':true
                  })
                 //  this.cls.success = true;
                 // this.cls.danger =false;
                 // this.cls.warning=false;
             },
            btnDangerClick(){

                this.cls2.pop();
                this.cls2.push({
                    'danger':true
                })
               //  this.cls.danger=true;
            },
            btnWarningClick(){

                this.cls2.pop();
                this.cls2.push({
                    'waring':true
                })
                 // this.cls.warning = true;
            }

        }
    }


    Vue.createApp(app).mount('#app')
</script>

</html>